<!DOCTYPE html>
<html lang="en">
<head>
    <title>Single</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/medile.css" rel='stylesheet' type='text/css'/>
    <link href="css/single.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all"/>
    <!-- news-css -->
    <link rel="stylesheet" href="news-css/news.css" type="text/css" media="all"/>
    <!-- //news-css -->
    <!-- list-css -->
    <link rel="stylesheet" href="list-css/list.css" type="text/css" media="all"/>
    <!-- //list-css -->
    <!-- font-awesome icons -->
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <!-- //font-awesome icons -->
    <!-- js -->
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <!-- //js -->
    <!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
    <script src="js/owl.carousel.js"></script>
    <script>
        $(document).ready(function () {
            $("#owl-demo").owlCarousel({

                autoPlay: 3000, //Set AutoPlay to 3 seconds

                items: 5,
                itemsDesktop: [640, 5],
                itemsDesktopSmall: [414, 4]

            });

        });
    </script>
    <script src="js/simplePlayer.js"></script>
<!--    <script>-->
<!--        $("document").ready(function () {-->
<!--            $("#video").simplePlayer();-->
<!--        });-->
<!--    </script>-->

</head>

<body>
<div id="app">
    <!-- header -->
    <div class="header">
        <div class="container">
            <div class="w3layouts_logo">
                <a href="index.html"><h1>One<span>Movies</span></h1></a>
            </div>
            <div class="w3_search">
                <form action="#" method="post">
                    <input type="text" name="Search" placeholder="Search" required="">
                    <input type="submit" value="Go">
                </form>
            </div>
            <div class="w3l_sign_in_register">
                <ul>
                    <li><i class="fa fa-phone" aria-hidden="true"></i> (+000) 123 345 653</li>
                    <li v-if="loginUser==null"><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>
                    <li v-else>
                        <span>欢迎回来:{{loginUser.nickname}}</span>
                        <a class="btn btn-sm" href="javascript:void(0)" @click="$logout">退出</a>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //header -->
    <!-- bootstrap-pop-up -->
<!--    添加登录组件-->
    <login-component>

    </login-component>

    <!-- //bootstrap-pop-up -->
    <!-- nav -->
    <div class="movies_nav">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header navbar-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <nav>
                        <ul class="nav navbar-nav">
                            <li class=""><a href="index.html">首页</a></li>
                            <li><a href="news.html">影讯&amp;购票</a></li>
                            <li><a href="series.html">排行榜</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">分类 <b
                                        class="caret"></b></a>
                                <genres-menus></genres-menus>
                            </li>

                            <li><a href="review.html">影评</a></li>

                            <!--<li><a href="short-codes.html">排行榜</a></li>-->
                            <li><a href="list.html">电影列表</a></li>
                        </ul>
                    </nav>
                </div>
            </nav>
        </div>
    </div>
    <!-- //nav -->
    <div class="general_social_icons">
        <nav class="social">
            <ul>
                <li class="w3_twitter"><a href="#">Twitter <i class="fa fa-twitter"></i></a></li>
                <li class="w3_facebook"><a href="#">Facebook <i class="fa fa-facebook"></i></a></li>
                <li class="w3_dribbble"><a href="#">Dribbble <i class="fa fa-dribbble"></i></a></li>
                <li class="w3_g_plus"><a href="#">Google+ <i class="fa fa-google-plus"></i></a></li>
            </ul>
        </nav>
    </div>
    <!-- single -->
    <div class="single-page-agile-main">
        <div class="container">
            <!-- /w3l-medile-movies-grids -->
            <div class="agileits-single-top">
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
                    <li class="active">Single</li>
                </ol>
            </div>
            <div class="single-page-agile-info">
                <!-- /movie-browse-agile -->
                <div class="show-top-grids-w3lagile">
                    <div class="col-sm-8 single-left">
                        <div class="song">
                            <div class="song-info">
                                <h3>{{film.name}}</h3>
                            </div>
                            <div class="video-grid-single-page-agileits">
                                <div data-video="dLmKio67pVQ" id="video">
                                    <img v-bind:src="film.cover" alt="" class="img-responsive"/>
                                </div>
                                <div id="info">
								<span>
									<span class="pl">导演</span>：
									<span class="attrs">
                                        <a href="#" v-for="maker in film.makerList" v-if="maker.role=='导演'">{{maker.name}}<i> | </i></a>
                                    </span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">编剧</span>：
									<span class="attrs">
                                        <a href="#" v-for="maker in film.makerList" v-if="maker.role=='编剧'">{{maker.name}}<i> | </i></a>
                                    </span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">主演</span>：
									<span class="attrs">
                                        <a href="#" v-for="maker in film.makerList" v-if="maker.role=='演员'">{{maker.name}}<i> | </i></a>
                                    </span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">类型</span>：
									<span class="attrs">
                                        <span v-for="c in film.categoryList">{{c.name}} <i> | </i></span>
                                    </span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">制片国家</span>：
									<span class="attrs">{{film.country}}</span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">语言</span>：
									<span class="attrs">{{film.language}}</span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">上映日期</span>：
									<span class="attrs">{{extractYear(film.releaseDate)}} 年</span>
								</span>
                                    <br/>
                                    <span>
									<span class="pl">片长</span>：
									<span class="attrs">{{film.length}}</span>
								</span>
                                </div>
                                <div class="rating_wrap clearbox" rel="v:rating">
                                    <div class="clearfix">
                                        <div class="rating_logo ll">网友评分</div>
                                    </div>
                                    <div class="rating_self clearfix" typeof="v:Rating">
                                        <strong class="ll rating_num" property="v:average">{{Number(film.score).toFixed(1) }}</strong>
                                        <span property="v:best" content="10.0"></span>
                                        <div class="rating_right ">
                                            <div class="block-stars">
                                                <ul class="w3l-ratings">
                                                    <li v-for="s in film.stars" style="margin-right: 5px;">
                                                        <a href="#"><i v-bind:class="s" aria-hidden="true"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="rating_sum">
                                                <a href="collections" class="rating_people">
                                                    <span property="v:votes">{{film.statistics[0]}}</span>人评价
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ratings-on-weight">

                                        <div class="item">
								        
								        <span class="stars5 starstop" title="力荐">
								            5星
								        </span>
                                            <!--<div class="power" style="width:4px"></div>-->
                                            <span class="rating_per">{{Number(film.statistics[5]/film.statistics[0]*100).toFixed(1)}}%</span>
                                            <br>
                                        </div>
                                        <div class="item">
								        
								        <span class="stars4 starstop" title="推荐">
								            4星
								        </span>
                                            <!--<div class="power" style="width:15px"></div>-->
                                            <span class="rating_per">{{Number(film.statistics[4]/film.statistics[0]*100).toFixed(1)}}%</span>
                                            <br>
                                        </div>
                                        <div class="item">
								        
								        <span class="stars3 starstop" title="还行">
								            3星
								        </span>
                                            <!--<div class="power" style="width:64px"></div>-->
                                            <span class="rating_per">{{Number(film.statistics[3]/film.statistics[0]*100).toFixed(1)}}%</span>
                                            <br>
                                        </div>
                                        <div class="item">
								        
								        <span class="stars2 starstop" title="较差">
								            2星
								        </span>
                                            <!--<div class="power" style="width:37px"></div>-->
                                            <span class="rating_per">{{Number(film.statistics[2]/film.statistics[0]*100).toFixed(1)}}%</span>
                                            <br>
                                        </div>
                                        <div class="item">
								        
								        <span class="stars1 starstop" title="很差">
								            1星
								        </span>
                                            <!--<div class="power" style="width:7px"></div>-->
                                            <span class="rating_per">{{Number(film.statistics[1]/film.statistics[0]*100).toFixed(1)}}%</span>
                                            <br>
                                        </div>
                                    </div>

                                </div>
                                <div class="film_brief" style="clear: both;">
                                    <h4 style="line-height: 2em; height: 2em; color: #ff8d1b">{{film.name}}的简介......</h4>
                                    <p style="font-size: 0.8em; text-indent: 2em;">{{film.info}}</p>
                                </div>
                            </div>
                        </div>

                        <div id="interest_sect_level" class="clearfix">


                        </div>
                        <div class="clearfix"></div>

                        <div class="all-comments">
                            <!-- 警告框元素 -->
                            <div id="successAlert" class="alert alert-success alert-dismissible" role="alert" style="display: none;">
                                <strong>成功！</strong> 您的评论已提交。
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="ll j a_stars">
                                <span>打分:</span>
                                <div id="score-list" class="block-stars" style="position: relative;left: -550px;">
                                    <ul class="w3l-ratings" style="display: inline-block;">
                                        <li @mouseover="overScore(1)" @mouseleave="leaveScore(1)" @click="clickScore(1)">
                                            <a href="javascript:void(0)"><i class="fa fa-star-o" aria-hidden="true"></i></a></li>
                                        <li @mouseover="overScore(2)" @mouseleave="leaveScore(2)" @click="clickScore(2)">
                                            <a href="javascript:void(0)"><i class="fa fa-star-o" aria-hidden="true"></i></a></li>
                                        <li @mouseover="overScore(3)" @mouseleave="leaveScore(3)" @click="clickScore(3)">
                                            <a href="javascript:void(0)"><i class="fa fa-star-o" aria-hidden="true"></i></a></li>
                                        <li @mouseover="overScore(4)" @mouseleave="leaveScore(4)" @click="clickScore(4)">
                                            <a href="javascript:void(0)"><i class="fa fa-star-o" aria-hidden="true"></i></a></li>
                                        <li @mouseover="overScore(5)" @mouseleave="leaveScore(5)" @click="clickScore(5)">
                                            <a href="javascript:void(0)"><i class="fa fa-star-o" aria-hidden="true"></i></a></li>
                                    </ul>
                                    <span id="score-text" style="font-size: 0.8em; display: inline-block; width: 30px;">推荐</span>
                                </div>
                            </div>
                            <div class="all-comments-info">
                                <div class="agile-info-wthree-box">
                                    <form @submit.passive="submitReview">
                                        <textarea v-model="content" placeholder="填写评论" required=""></textarea>
                                        <input type="submit" value="提交">
                                        <div class="clearfix"></div>
                                    </form>
                                </div>
                            </div>
                            <div class="media-grids">
                                <div class="media" v-for="item in reviewList">
                                    <h5>{{item.user.avatar}}</h5>
                                    <div class="media-left">
                                        <a href="#">
                                            <img v-bind:src="images/user.jpg" title="One movies" alt=" "/>
                                        </a>
                                    </div>

                                    <div class="media-body">
                                        <p>{{item.content}}</p>
                                        <span>View all posts by :<a href="#">{{item.user.username}} </a></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 single-right">
                        <h3>Up Next</h3>
                        <div class="single-grid-right">
                            <div class="single-right-grids">
                                <div class="col-md-4 single-right-grid-left">
                                    <a href="single.html"><img src="images/m1.jpg" alt=""/></a>
                                </div>
                                <div class="col-md-8 single-right-grid-right">
                                    <a href="single.html" class="title"> Nullam interdum metus</a>
                                    <p class="author"><a href="#" class="author">John Maniya</a></p>
                                    <p class="views">2,114,200 views</p>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>


                    <div class="clearfix"></div>
                </div>
                <!-- //movie-browse-agile -->
                <!--body wrapper start-->


            </div>
            <!-- //w3l-latest-movies-grids -->
        </div>
    </div>
    <!-- //w3l-medile-movies-grids -->

    <!-- footer -->

<!-- //footer -->
<!-- Bootstrap Core JavaScript -->

<script src="/public/js/vue.js"></script>
<script src="/public/js/axios.js"></script>
<script src="/public/js/axios-config.js"></script>
<script src="/public/js/vue-config.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            loginUser:JSON.parse(sessionStorage.getItem('loginUser')),
            star:0,
            content:null,
            scoreTestArr:["","很差","较差","还行","推荐","力荐"],
            film: {}, // null会导致网页显示错误
            reply:{},
            reviewList:[],
            params:{
                pageNum:1,
                pageSize:10,
                status:1,
                filmId:null
            },
            hasMoreReviews:true
        },
        methods: {

            submitReply(event){
                if(this.loginUser == null){
                    $('#myModal').modal('show')
                }
              let params = {
                  'userId': this.loginUser.id,
                  'filmId': this.film.id
              }
              let elements = event.target.elements
                for (let i = 0; i < elements.length; i++) {
                    let element = elements[i]
                    if(element.name){
                        params[element.name] = element.value
                    }
                }
                let  url = '/api/v1/review/save'
                axios.post(url,params)
                    .then(res =>{
                        alert('回复成功')
                    })
            },
            submitReview(reviewId){
                this.loginUser = {'id':101}
                if(this.loginUser){
                    let url = '/api/v1/review/save'
                    let params = {
                        'userId':this.loginUser.id,
                        'filmId':this.film.id,
                        'content':this.content,
                        'reviewId':reviewId
                    }
                    axios.post(url,params)
                        .then(res =>{
                            alert(res.message)
                        })
                }
            },
            showCommenting(item){
                item.isShowComment = true
                window.setTimeout(function (){
                    document.getElementById(`${item.id}`).focus()
                },100)
            },
            hideCommenting(item){
                window.setTimeout(function (){
                    item.isShowComment = false
                },100)
            },
            clickScore(s){
                this.star = s
                this.loginUser = {'id':100}
                if(this.loginUser){
                   let params = {
                       'userId':this.loginUser.id,
                       'filmId':this.film.id,
                       'score':this.star*2
                   }
                   let url = '/api/v1/score/save'
                    axios.post(url,params)
                        .then(res =>{
                            alert(res.message)
                            if(res.code == 200){
                                this.loadData(this.film.id)
                            }
                        })
                }else {
                    $("#myModal").modal('show')
                }
            },
            leaveScore(s){
                const scoreList = document.querySelectorAll("#score-list>li")
                document.querySelector("#score-text").innerHTML = this.scoreTestArr[this.star]
                for (const i in scoreList) {
                    if(i<s && i>this.star){
                        scoreList[i].querySelector("i").classList.remove("fa-star")
                        scoreList[i].querySelector("i").classList.add("fa-star-o")
                    }
                    else break;
                }
            },
            overScore(s){
              const scoreList = document.querySelectorAll("#score-list>li")
                document.querySelector("#score-text").innerHTML = this.scoreTestArr[s]
                for (const i in scoreList) {
                    if(i<s){
                        scoreList[i].querySelector("i").classList.remove("fa-star-o")
                        scoreList[i].querySelector("i").classList.add("fa-star")
                    }
                    else break;
                }
            },
            handleScroll(){
                //判断当前滚动条滚动到了浏览器底部
              const bottomOfWindow = window.innerHeight + window.scrollY +1 >=document.documentElement.scrollHeight
               if(bottomOfWindow){
                   this.onScrollToBottom()
               }
            },
            onScrollToBottom(){
                if(this.hasMoreReviews) {// 如果还有没查到的数据，就接着查找下一页
                    this.params.pageNum++
                    this.loadReviewList()
                }
            },
            loadReviewList(){
              let url = '/api/v1/review/page'
              axios.post(url,this.params)
                  .then(res =>{
                      this.hasMoreReviews = !res.data.isLastPage
                      res.data.list.forEach(item =>{
                          //控制评论下边的回复框的显示和隐藏的,一会儿有用
                          item.isShowComment = false
                          this.reviewList.push(item)
                      })
                  })
            },
            loadData(fid) {
                let url = `/api/v1/film/detail/${fid}`
                axios.get(url)
                    .then(res =>{
                        if(res.data){
                            this.film = res.data
                            // 将评分转换成几颗星
                            this.film.stars = new Array(5)
                            let score = this.film.score//获取影片的评分
                            for (let i = 0; i < 5; i++) {
                                if (score >= 2) {
                                    this.film.stars[i] = 'fa fa-star'
                                } else {
                                    if (score < 2 && score > 0) {
                                        this.film.stars[i] = 'fa fa-star-half-o'
                                    } else {
                                        this.film.stars[i] = 'fa fa-star-o'
                                    }
                                }
                                score -= 2
                            }
                        }else {
                            window.location.href = '/user/404.html'
                        }
                    })
            },
            extractYear(dateStr) {
                // 尝试使用 Date 对象解析日期字符串
                const date = new Date(dateStr);
                if (isNaN(date)) {
                    // 如果解析失败，可以使用字符串处理方法（这里假设日期字符串格式为 YYYY-MM-DD）
                    const parts = dateStr.split('-');
                    return parts.length >= 3 ? parseInt(parts[0], 10) : null; // 返回年份或 null（如果格式不正确）
                } else {
                    // 如果解析成功，返回年份
                    return date.getFullYear();
                }
            }
        },
        mounted() {
            const urlObj = new URL(window.location.href)
            const params = new URLSearchParams(urlObj.search)
            const fid = params.get('id')
            if (fid) {
                this.loadData(fid)
                this.params.filmId = fid
                this.loadReviewList()
            } else {
                // 如果未在地址后找到id参数，则跳转到404页面
                window.location.href = '/user/404.html'
            }
            //在组件挂载后添加滚动事件监听器
            window.addEventListener('scroll',this.handleScroll)
            //在组件卸载前移除上一行的滚动监听，防止内存泄露
            this.$once('hook:beforeDestroy',()=>{
                window.removeEventListener('scroll',this.handleScroll)
            })
        }
    })
</script>

<script>
    $('.toggle').click(function () {
        // Switches the Icon
        $(this).children('i').toggleClass('fa-pencil');
        // Switches the forms
        $('.form').animate({
            height: "toggle",
            'padding-top': 'toggle',
            'padding-bottom': 'toggle',
            opacity: "toggle"
        }, "slow");
    });
</script>

<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
</script>
<!-- //Bootstrap Core JavaScript -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
            };
        */

        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<!-- //here ends scrolling icon -->
</div>
</body>
</html>